Menguasai CSS Counter Style: Memformat Angka Negatif untuk Audiens Global

Dalam lanskap desain web yang terus berkembang, presentasi angka yang tepat dan sensitif secara budaya sangat penting, terutama ketika berurusan dengan nilai negatif. Meskipun CSS menawarkan alat yang ampuh untuk menata konten, pemformatan angka negatif yang bernuansa untuk audiens global secara historis memerlukan solusi JavaScript yang kompleks atau bergantung pada logika sisi server. Namun, dengan munculnya dan meningkatnya adopsi modul CSS Counter Styles, desainer dan pengembang kini memiliki cara asli yang kuat untuk mengontrol bagaimana penanda daftar dan item daftar ditampilkan, termasuk pemformatan angka negatif yang seringkali rumit.

Panduan komprehensif ini mendalami kemampuan CSS Counter Styles untuk menangani pemformatan angka negatif. Kami akan menjelajahi prinsip-prinsip dasar, mendemonstrasikan implementasi praktis, dan menawarkan wawasan tentang mengadopsi teknik-teknik ini untuk kehadiran web yang benar-benar terinternasionalisasi.

Tantangan Pemformatan Angka Negatif

Angka negatif direpresentasikan secara berbeda di berbagai budaya dan konteks. Notasi umum meliputi:

• Tanda minus di depan: -10
• Tanda kurung: (10)
• Tanda minus di belakang: 10-
• Penempatan simbol mata uang tertentu: -$10 atau 10$

Selain representasi sederhana, konteks angka seringkali menentukan pemformatannya. Misalnya, laporan keuangan mungkin lebih memilih tanda kurung untuk angka negatif agar secara visual membedakannya dari angka positif, sementara notasi ilmiah mungkin memiliki konvensi tersendiri. Menstandardisasi hal ini di seluruh situs web global, di mana pengguna berinteraksi dari latar belakang yang beragam, dapat menjadi tantangan desain yang signifikan.

Secara historis, mencapai tingkat kontrol ini langsung di dalam CSS untuk penanda sembarang terbatas. Pengembang sering kali menggunakan:

• Render sisi server: Memformat angka sebelum dikirim ke browser.
• Manipulasi JavaScript: Menggunakan JavaScript untuk mendeteksi angka negatif dan menerapkan kelas atau gaya yang sesuai.
• Kelas CSS yang telah ditentukan: Membuat banyak kelas untuk format angka negatif yang berbeda (misalnya, .negative-paren, .negative-dash).

Metode-metode ini, meskipun fungsional, dapat menyebabkan kode yang kurang dapat dipelihara, peningkatan waktu pemuatan, dan ketidaksesuaian antara logika konten dan presentasi.

Memperkenalkan CSS Counter Styles

Modul CSS Counter Styles menyediakan cara deklaratif untuk mendefinisikan penanda item daftar dan gaya penanda kustom. Ini memungkinkan pengembang untuk membuat sistem penomoran yang canggih di luar decimal, lower-alpha, atau upper-roman standar. Intinya, modul ini memanfaatkan aturan @counter-style untuk mendefinisikan gaya penanda bernama yang kemudian dapat diterapkan menggunakan properti list-style-type atau fungsi CSS counter-set dan counter().

Kekuatan sejati untuk pemformatan angka negatif terletak pada deskriptor negative dalam aturan @counter-style. Deskriptor ini memungkinkan Anda untuk menentukan format untuk nilai penanda negatif yang berbeda dari format untuk nilai non-negatif.

Aturan @counter-style dan Deskriptornya

Aturan @counter-style yang tipikal memiliki struktur berikut:

            @counter-style nama-counter-kustom {
  /* Deskriptor ada di sini */
}

            

              
                Copy
              
            
          

Deskriptor utama yang relevan dengan pemformatan angka meliputi:

• name: Nama gaya penanda (wajib).
• symbols: Karakter atau string yang digunakan untuk merepresentasikan digit (misalnya, '0' '1' '2' ... '9' untuk desimal).
• suffix: String yang ditambahkan ke nilai penanda (misalnya, '.' untuk penanda daftar desimal).
• pad-with: Memastikan nilai penanda memiliki lebar minimum dengan menambahkan karakter yang ditentukan.
• speak-as: Mendefinisikan bagaimana penanda harus dibaca oleh teknologi bantu.
• fallback: Gaya penanda cadangan yang akan digunakan jika gaya kustom tidak dapat dirender.
• additive-symbols: Untuk sistem aditif seperti angka Romawi.
• range: Mendefinisikan cakupan nilai penanda yang berlaku untuk gaya tersebut (misalnya, '0' infinity untuk positif, '-infinity' '0' untuk negatif).
• negative: Format yang akan diterapkan pada angka negatif. Ini adalah fokus utama kami.

Memahami Deskriptor negative

Deskriptor negative menerima daftar string yang mendefinisikan prefiks, representasi angka, dan sufiks untuk nilai negatif. Formatnya umumnya mengikuti:

            negative: prefiks representasi-angka sufiks;

            

              
                Copy
              
            
          

Contohnya:

• negative: '-' ; (menambahkan tanda minus sebelum angka)
• negative: '(' ')' ; (menyelimuti angka dalam tanda kurung)
• negative: '' '-' ; (menambahkan tanda minus setelah angka)

number-representation bisa berupa kata kunci yang ditentukan sistem seperti '...' (yang menyiratkan representasi standar angka itu sendiri) atau string format tertentu.

Contoh Praktis Pemformatan Angka Negatif dengan CSS Counter Styles

Mari kita ilustrasikan cara menggunakan deskriptor negative untuk mencapai berbagai gaya pemformatan angka negatif.

Contoh 1: Tanda Minus Prefiks Standar

Ini adalah representasi yang paling umum. Kami ingin angka negatif muncul dengan tanda minus di depan, seperti -10.

            @counter-style negative-dash {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '.';
  negative: '-' ; /* Memformat angka negatif dengan tanda minus di depan */
  range: -infinity 0;
}

/* Terapkan ke daftar berurutan */
.financial-list {
  list-style-type: negative-dash;
}

            

              
                Copy
              
            
          

Jika kita memiliki item daftar dengan nilai yang diatur menggunakan counter-set, seperti:

            .item-positive { counter-set: financial-value 50; }
.item-negative { counter-set: financial-value -25; }

            

              
                Copy
              
            
          

Dan kemudian menggunakan counter(financial-value) dalam elemen semu, outputnya akan menjadi:

• 50.
• -25.

Contoh 2: Tanda Kurung untuk Angka Negatif

Banyak konteks keuangan dan akuntansi lebih memilih untuk menyertakan angka negatif dalam tanda kurung. Misalnya, (25).

            @counter-style negative-paren {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '(' ')' ; /* Meliputi angka negatif dalam tanda kurung */
  range: -infinity 0;
}

.account-list {
  list-style-type: negative-paren;
}

            

              
                Copy
              
            
          

Dengan counter-set: financial-value -25;, outputnya akan menjadi:

• (25)

Contoh 3: Tanda Minus di Belakang

Meskipun tidak umum di budaya Barat, beberapa konvensi regional mungkin menggunakan tanda minus di belakang, seperti 25-.

            @counter-style negative-trailing-dash {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '' '-' ; /* Menambahkan tanda minus di belakang angka */
  range: -infinity 0;
}

.billing-list {
  list-style-type: negative-trailing-dash;
}

            

              
                Copy
              
            
          

Dengan counter-set: financial-value -25;, outputnya akan menjadi:

• 25-

Contoh 4: Menyertakan Simbol Mata Uang

Mengintegrasikan simbol mata uang dengan pemformatan angka negatif menambah lapisan kerumitan. CSS Counter Styles dapat menangani ini dengan menyertakan simbol dalam deskriptor negative. Misalnya, untuk merepresentasikan dolar AS negatif sebagai -$10.

            @counter-style negative-usd {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '-$' ; /* Menambahkan prefiks '-$' untuk angka negatif */
  range: -infinity 0;
}

.currency-list {
  list-style-type: negative-usd;
}

            

              
                Copy
              
            
          

Dengan counter-set: currency-value -25;, outputnya akan menjadi:

• -$25

Pertimbangan Penting untuk Mata Uang Global: Meskipun ini menunjukkan mekanismenya, pemformatan mata uang global yang sebenarnya membutuhkan lebih dari sekadar prefiks statis. Wilayah yang berbeda memiliki simbol mata uang, penempatan, dan pemisah desimal/ribuan yang berbeda. Untuk pemformatan mata uang internasional yang komprehensif, seringkali perlu untuk menggabungkan CSS Counter Styles dengan pustaka lokalisasi atau logika sisi server yang menyediakan pemformatan yang benar berdasarkan lokal pengguna.

Contoh 5: Menggabungkan Rentang dan Pemformatan Negatif

Deskriptor range sangat penting untuk menentukan kapan gaya tertentu berlaku. Secara default, range: '0' infinity; berlaku untuk angka non-negatif, dan range: '-infinity' '0'; berlaku untuk angka negatif. Kita dapat secara eksplisit mendefinisikan rentang ini jika diperlukan, tetapi seringkali perilaku default negative sudah cukup ketika digunakan bersama dengan rentang positif default.

Pertimbangkan skenario di mana Anda ingin angka positif ditampilkan biasa dan angka negatif dalam tanda kurung, dengan cadangan untuk nilai yang tidak diketahui.

            @counter-style custom-finance {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '(' ')' ; /* Angka negatif dalam tanda kurung */
  fallback: decimal; /* Gunakan desimal untuk yang lain */
  range: -infinity 0;
}

.account-balances {
  list-style-type: custom-finance;
}

            

              
                Copy
              
            
          

Menerapkan Gaya Penanda Kustom

Setelah aturan @counter-style didefinisikan, aturan tersebut dapat diterapkan dalam beberapa cara:

1. Untuk item daftar (
   ,
   ): Gunakan properti list-style-type pada elemen daftar itu sendiri atau item daftar individual.
   1. Untuk penanda sembarang: Gunakan fungsi counter() di dalam properti CSS seperti content (seringkali dalam elemen semu seperti ::before atau ::after).

   Menggunakan list-style-type

   Ini adalah aplikasi paling sederhana untuk daftar tradisional.

               <ul>
     <li style="counter-set: mycount -5;">Item Satu</li>
     <li style="counter-set: mycount 10;">Item Dua</li>
     <li style="counter-set: mycount -15;">Item Tiga</li>
   </ul>
   
   <style>
     /* Asumsikan @counter-style negative-paren didefinisikan di atas */
     ul {
       list-style-type: negative-paren;
     }
     /* Jika menggunakan counter-set pada item tertentu, Anda mungkin perlu mengganti */
     li {
        /* Ini tidak bekerja secara langsung untuk menampilkan nilai penanda */
     }
   </style>
   
   <p>Kasus penggunaan yang lebih umum untuk daftar melibatkan penanda daftar itu sendiri, tidak selalu counter-set pada elemen li individual. Jika Anda hanya memiliki daftar berurutan dan ingin mengontrol penomoran itemnya, termasuk penomoran negatif (yang kurang umum untuk penanda ol standar tetapi dimungkinkan dengan counter-set dan counter()):
   </p>
   
   <pre>
   <style>
     @counter-style gaya-daftar-kustom-saya {
       symbols: 
       negative: 
     }
     ol {
       list-style-type: gaya-daftar-kustom-saya;
     }
   </style>
   <ol>
     <li>Item pertama (akan diberi nomor '1')</li>
     <li>Item kedua (akan diberi nomor '2')</li>
   </ol>
   
   <p>Untuk benar-benar menampilkan nilai negatif sembarang sebagai penanda daftar, Anda biasanya akan menggunakan counter-set dan counter() di dalam elemen semu.</p>
   </pre>
   
               
   
                 
                   Copy
                 
               
             

   Menggunakan counter() dengan Elemen Semu

   Di sinilah kekuatan sebenarnya untuk tampilan numerik kustom bersinar, terutama untuk elemen yang bukan daftar standar.

   <div class="data-point"
        style="counter-set: value -12.5;"
   >Nilai</div>
   <div class="data-point"
        style="counter-set: value 25.7;"
   >Nilai</div>
   
   <style>
     @counter-style data-number {
       symbols: 
       negative: 
       suffix: '%';
       range: -infinity 0;
     }
   
     .data-point::before {
       content: counter(value, data-number) " ";
       display: inline-block;
       margin-right: 10px;
       font-weight: bold;
     }
   
     /* Contoh: Menata nilai negatif secara berbeda */
     .data-point[style*='-12.5']::before {
       color: red;
     }
   </style>
   </pre>
   
   Output untuk yang di atas akan menjadi:
   
   
     
   -12.5% (kemungkinan berwarna merah, tergantung pada CSS spesifik)
     
   25.7%
   
   
   Catatan tentang counter-set: Properti counter-set biasanya diterapkan pada elemen leluhur untuk menginisialisasi atau mengatur ulang penanda. Ketika digunakan langsung pada elemen seperti .data-point, ini mengatur penanda untuk konteks elemen tersebut. Menggunakan counter() kemudian akan mengambil nilai ini.
   
   Pertimbangan Global dan Praktik Terbaik
   
   Saat mendesain untuk audiens global, patuhi praktik terbaik ini:
   
   
     
   Teliti Konvensi Lokal: Pahami bagaimana angka negatif dan mata uang direpresentasikan di wilayah target Anda. Meskipun contoh mencakup format umum, beberapa wilayah mungkin memiliki preferensi unik.
     
   Uji Secara Menyeluruh: Uji implementasi Anda di berbagai browser dan perangkat. Pastikan perenderannya konsisten dan sesuai harapan.
     
   Prioritaskan Keterbacaan: Tujuan utama adalah komunikasi yang jelas. Pilih format yang meningkatkan pemahaman daripada mempersulitnya. Tanda minus standar seringkali merupakan yang paling dipahami secara universal.
     
   Aksesibilitas: Pastikan format yang Anda pilih tidak menghambat pembaca layar atau teknologi bantu lainnya. Deskriptor speak-as bisa sangat penting di sini, tetapi umumnya, representasi numerik standar ditangani dengan baik oleh teknologi bantu.
     
   Gabungkan dengan Lokalisasi (L10n): Untuk skenario kompleks yang melibatkan mata uang, tanggal, dan waktu, CSS Counter Styles paling baik digunakan bersama dengan pustaka internasionalisasi yang kuat atau logika sisi server yang mendeteksi lokal pengguna dan menerapkan pemformatan yang sesuai.
     
   Gunakan Cadangan: Selalu sediakan gaya penanda fallback untuk memastikan degradasi yang mulus jika gaya kustom Anda tidak didukung atau dipahami oleh browser. Gaya decimal bawaan adalah pilihan yang aman.
     
   Jaga Kesederhanaan: Kecuali jika persyaratan regional tertentu mengharuskannya, pilih format yang paling sederhana dan paling dikenali secara universal (biasanya tanda minus di depan).
   
   
   Contoh Internasional
   
   
     
   Jerman: Sering menggunakan koma sebagai pemisah desimal dan titik sebagai pemisah ribuan. Angka negatif mungkin ditampilkan sebagai -1.234,56 atau terkadang (1.234,56).
     
   Jepang: Biasanya menggunakan koma untuk pemisah ribuan dan titik untuk pemisah desimal, dengan angka negatif ditampilkan sebagai -12.345,67.
     
   Cina: Mirip dengan Jepang, menggunakan koma untuk ribuan dan titik untuk desimal, dengan angka negatif diformat sebagai -12.345,67.
     
   Prancis: Menggunakan spasi untuk pemisah ribuan dan koma untuk pemisah desimal. Angka negatif bisa berupa -1 234,56 atau (1 234,56).
   
   
   CSS Counter Styles dapat mendefinisikan symbols untuk menangani pemisah desimal dan ribuan, tetapi struktur inti dari representasi negatif (prefiks, sufiks) adalah apa yang secara langsung dikontrol oleh deskriptor negative.
   
   Batasan dan Dukungan Browser
   
   Meskipun modul CSS Counter Styles sangat ampuh, penting untuk menyadari dukungan browser. Browser modern umumnya menawarkan dukungan yang baik untuk @counter-style dan deskriptornya, termasuk negative. Namun, untuk browser lama atau lingkungan di mana dukungan penuh tidak dijamin, cadangan sangat penting.
   
   Anda dapat memeriksa dukungan browser saat ini di sumber daya seperti caniuse.com. Jika kompatibilitas dengan browser lama adalah persyaratan yang ketat, solusi berbasis JavaScript mungkin masih diperlukan sebagai cadangan yang mulus.
   
   Teknik Lanjutan dan Kustomisasi
   
   Selain deskriptor negative dasar, CSS Counter Styles menawarkan kustomisasi lebih lanjut:
   
   
     
   Simbol Kustom untuk Digit: Anda dapat mendefinisikan set karakter Anda sendiri untuk digit menggunakan deskriptor symbols. Ini bisa berguna untuk skrip non-Latin atau sistem penomoran kustom.
     
   pad-with untuk Lebar Tetap: Pastikan angka Anda mempertahankan lebar visual yang konsisten dengan mengisinya dengan nol di depan atau karakter lain.
     
   Rentang Kompleks: Meskipun tidak secara langsung untuk pemformatan negatif, deskriptor range dapat digabungkan dengan additive-symbols untuk sistem angka yang lebih kompleks di mana nilai positif dan negatif mungkin memiliki representasi dasar yang sama sekali berbeda.
   
   
   Misalnya, untuk memformat angka dengan nol di depan untuk digit tunggal dan menggunakan tanda kurung untuk nilai negatif:
   
   @counter-style padded-negative {
     symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
     suffix: '';
     pad-with: '0'; /* Isi dengan nol setidaknya 2 digit */
     negative: '(' ')' ; 
     range: -99 99; /* Terapkan pengisian hanya dalam rentang ini */
   }
   
   
   Ini akan menampilkan -5 sebagai (-05) jika pad-with diterapkan pada nilai absolut, atau (-5) jika pad-with hanya mempengaruhi representasi positif. Perilaku yang tepat bisa bernuansa, dan pengujian sangat penting.
   
   Kesimpulan
   
   Modul CSS Counter Styles, terutama deskriptor negative, memberdayakan desainer dan pengembang web untuk mengimplementasikan pemformatan angka negatif yang canggih dan sesuai secara budaya langsung di dalam CSS. Pendekatan asli ini menghasilkan kode yang lebih bersih, kinerja yang lebih baik, dan strategi internasionalisasi yang lebih kuat.
   
   Dengan memahami dan memanfaatkan @counter-style, Anda dapat melampaui tampilan numerik generik dan membuat pengalaman pengguna yang tidak hanya menarik secara visual tetapi juga menghormati konvensi global.
   
   Mulailah bereksperimen dengan gaya penanda kustom hari ini untuk meningkatkan desain Anda dan memastikan angka Anda berbicara dengan jelas kepada setiap pengguna, di mana pun mereka berada di dunia.